<template>
	<view>
		<view class="s-addr-box">
			<view>
				<s-list-cell :hover="false" padding="0">
					<view class="s-line-cell">
						<view class="s-title">手机号码</view>
						<input type="number" placeholder-class="s-phcolor" class="s-input" v-model="phone" placeholder="请输入手机号码" maxlength="11" /> 
					</view> 
				</s-list-cell>
			</view>
			<view class="s-addr-save">
				<s-button type="danger" height="88upx" @click="get_phone">确定</s-button>
			</view>
			<s-card :title="'相关信息'" v-if="info.province">
				<template v-slot:body>
					<view class="s-default">
						地址：{{info.province}}{{info.city}}
					</view>
					<view class="s-default">
						运营商：{{info.company}}
					</view>
					<view class="s-default">
						邮编：{{info.zip}}
					</view>
					<view class="s-default">
						区号：{{info.areacode}}
					</view>
				</template>
			</s-card>
		</view>
		
	</view>
	 
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				info:{},
			}
		},
		methods: {
			async get_phone(){
				var that =this;
				var phone = that.phone;
				if(!this.$s.api.isPhoneNumber(phone)){
					return await this.$s.uniApi.showToast({title: '请输入正确的手机号码！'});
				}
				const data = await this.$s.model.juhe.get_phone({phone:phone})
				if(data.code){
					this.info = data.data.result
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
@import 'phone.scss';
</style>
